<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>党建考堂</title>
  <link rel="stylesheet" href="./css/reset.css">
  <link rel="stylesheet" href="./css/pace-theme-loading-bar.css">
  <link rel="stylesheet" href="./css/swiper.min.css">
  <link rel="stylesheet" href="./css/animate.min.css">
  <link rel="stylesheet" href="./css/md-common.css">
  <link rel="stylesheet" href="./css/index.css">
</head>
<body>
<div style="opacity: 0" class="swiper-container pages-box">
  <section class="u-arrow-bottom">
    <div class="pre-wrap-bottom">
    </div>
  </section>
  <div id="audio_btn" class="off" style="display: block;">
    <div id="yinfu"></div>
    <audio loop="" src="./resource/kaotang.mp3" id="media" autoplay="autoplay" preload=""></audio>
  </div>
  <div class="swiper-wrapper">
    <div class="swiper-slide page1">
      <div class="img-box">
        <img style="width: 6.39rem" class="ani" swiper-animate-effect="fadeIn" swiper-animate-duration="3s"
             swiper-animate-delay="0.8s" src="./images/1-bg.png" alt="">
        <img class="yun ani" swiper-animate-effect="fadeInLeft" swiper-animate-duration="3s"
             swiper-animate-delay="0.8s" style="width: 6.43rem" src="./images/1-yun.png" alt="">
        <img style="width: .43rem" class="duanpai ani" swiper-animate-effect="fadeInLeft" swiper-animate-duration="3s"
             swiper-animate-delay="0.8s" src="./images/1-dun-pai.png" alt="">
        <img style="width: .53rem" class="jiangpai ani" swiper-animate-effect="fadeInRight" swiper-animate-duration="3s"
             swiper-animate-delay="0.8s" src="./images/1-jiangpai.png" alt="">
        <img style="width:5.70rem" class="phone ani" swiper-animate-effect="fadeInLeft" swiper-animate-duration="3s"
             swiper-animate-delay="0.8s" src="./images/1-phone.png" alt="">
        <img style="width: 2.16rem" class="phone-top1 ani" swiper-animate-effect="fadeInDown" swiper-animate-duration="3s"
             swiper-animate-delay="0.8s" src="./images/1-phone-top-2.png" alt="">
        <img style="width: 2.03rem" class="phone-top2 ani" swiper-animate-effect="fadeInDown" swiper-animate-duration="3s"
             swiper-animate-delay="0.8s" src="./images/1-phone-top-1.png" alt="">
        <img style="width: .51rem" class="person-1 ani" swiper-animate-effect="fadeIn" swiper-animate-duration="3s"
             swiper-animate-delay="2s" src="./images/1-person-1.png" alt="">
        <img style="width: .76rem" class="person-2 ani" swiper-animate-effect="fadeIn" swiper-animate-duration="3s"
             swiper-animate-delay="2s" src="./images/1-person-2.png" alt="">
        <img style="width: 2.04rem" class="book ani" swiper-animate-effect="fadeInRight" swiper-animate-duration="3s"
             swiper-animate-delay="0.8s" src="./images/1-book.png" alt="">
        <img style="width: 1.26rem" class="class ani" swiper-animate-effect="fadeInRight" swiper-animate-duration="3s"
             swiper-animate-delay="0.8s" src="./images/1-class.png" alt="">
      </div>
      <!--<p class="ani" swiper-animate-effect="bounceInLeft" swiper-animate-duration="1s" swiper-animate-delay="1s">内容一</p>-->
      <div class="page1-text-box">
        <p class="page1-title ani" swiper-animate-effect="fadeInLeft" swiper-animate-duration="3s"
           swiper-animate-delay="0.8s">指尖上的<span>智慧考堂</span></p>
        <p class="page1-desc ani" swiper-animate-effect="fadeInRight" swiper-animate-duration="3s"
           swiper-animate-delay="1.4s">APP在线答题，让党建学习更便捷、更高效</p>
      </div>
    </div>
    <div class="swiper-slide page2">
      <div class="img-box2">
        <img style="width: 7.11rem" class="bg-2 ani" swiper-animate-effect="fadeIn" swiper-animate-duration="2s"
             swiper-animate-delay="0.8s" src="./images/2-bg.png" alt="">
        <img style="width: 5.74rem" class="phone2 ani" swiper-animate-effect="fadeInLeft" swiper-animate-duration="2s"
             swiper-animate-delay="0.8s" src="./images/2-phone.png" alt="">
        <img style="width: .43rem" class="dengpai ani" swiper-animate-effect="fadeInLeft" swiper-animate-duration="2s"
             swiper-animate-delay="0.8s" src="./images/2-dengpai.png" alt="">
        <img style="width: 2.17rem" class="yun ani" swiper-animate-effect="fadeInLeft" swiper-animate-duration="2s"
             swiper-animate-delay="0.4s" src="./images/2-yun.png" alt="">
        <img style="width: 1.93rem" class="book ani" swiper-animate-effect="fadeInRight" swiper-animate-duration="2s"
             swiper-animate-delay="0.4s" src="./images/2-book.png" alt="">
        <img style="width: .63rem" class="person2 ani" swiper-animate-effect="fadeIn" swiper-animate-duration="2s"
             swiper-animate-delay="3s" src="./images/2-person.png" alt="">
        <img style="width: 1.23rem" class="book1 ani" swiper-animate-effect="fadeInLeft" swiper-animate-duration="2s"
             swiper-animate-delay="0.4s" src="./images/2-class-book.png" alt="">
        <img style="width: 1.40rem" class="phone-top1 ani" swiper-animate-effect="fadeInDown" swiper-animate-duration="2s"
             swiper-animate-delay="0.4s" src="./images/2-phone-top1.png" alt="">
        <img style="width: 1.34rem" class="phone-top-2 ani" swiper-animate-effect="fadeInRight" swiper-animate-duration="2s"
             swiper-animate-delay="0.4s" src="./images/2-phone-top-2.png" alt="">
        <img style="width: 0.89rem" class="phone-top-3 ani" swiper-animate-effect="fadeInRight" swiper-animate-duration="2s"
             swiper-animate-delay="0.4s" src="./images/2-phone-top-3.png" alt="">
        <img style="width: 1.49rem" class="phone-top-4 ani" swiper-animate-effect="fadeInDown" swiper-animate-duration="2s"
             swiper-animate-delay="0.4s" src="./images/2-phone-top-4.png" alt="">
      </div>
      <p class="page1-title ani" swiper-animate-effect="bounceInLeft" swiper-animate-duration="3s"
         swiper-animate-delay="0.2s">党建交流学习</p>
      <p class="page1-title2 ani" swiper-animate-effect="bounceInLeft" swiper-animate-duration="3s"
         swiper-animate-delay="0.2s">专业化平台</p>
      <p class="page1-desc ani" swiper-animate-effect="bounceInRight" swiper-animate-duration="3s"
         swiper-animate-delay="0.4s">只需简单三步，轻松玩转七一云党建考堂</p>
    </div>
    <div class="swiper-slide page3">
      <div class="top">
        <div class="top-tile ani" swiper-animate-effect="fadeIn" swiper-animate-duration="1s"
             swiper-animate-delay="0.2s">
          <div class="firstStep ani" swiper-animate-effect="fadeInLeft" swiper-animate-duration="2s"
               swiper-animate-delay="0.2s">第一步
          </div>
          <p class="desc ani" swiper-animate-effect="fadeInRight" swiper-animate-duration="2s"
             swiper-animate-delay="0.2s">入驻党建考堂</p>
        </div>
        <div class="phone-box ani" swiper-animate-effect="fadeIn" swiper-animate-duration="2s"
             swiper-animate-delay="1s">
          <img class="center-phone ani" swiper-animate-effect="fadeInDown" swiper-animate-duration="3s"
               swiper-animate-delay="0.2s" style="width:5.54rem" src="./images/3-center-phone.png" alt="">
          <img class="phone-code ani" swiper-animate-effect="zoomIn" swiper-animate-duration="3s"
               swiper-animate-delay="1s" style="width:4.43rem" src="./images/3-phone-code.png" alt="">
          <img class="user-card ani" swiper-animate-effect="zoomIn" swiper-animate-duration="4s"
               swiper-animate-delay="1.3s" style="width:3.58rem" src="./images/3-user-card.png" alt="">
        </div>
      </div>
      <div class="page3-text-box">
        <p class="ani" swiper-animate-effect="bounceInLeft" swiper-animate-duration="2s"
           swiper-animate-delay="1s">扫描二维码</p>
        <p class="ani" swiper-animate-effect="bounceInLeft" swiper-animate-duration="3s"
           swiper-animate-delay="2s">授权登录并按提示录入手机号</p>
        <p class="ani" swiper-animate-effect="bounceInLeft" swiper-animate-duration="3s"
           swiper-animate-delay="3s">即可<span>成功入驻</span>党建考堂</p>
      </div>
    </div>
    <div class="swiper-slide page4">
      <div class="top">
        <div class="top-tile ani" swiper-animate-effect="fadeIn" swiper-animate-duration="1s"
             swiper-animate-delay="0.2s">
          <div class="firstStep ani" swiper-animate-effect="fadeInLeft" swiper-animate-duration="2s"
               swiper-animate-delay="0.2s">第二步
          </div>
          <p class="desc ani" swiper-animate-effect="fadeInRight" swiper-animate-duration="2s"
             swiper-animate-delay="0.2s">了解党建考堂</p>
        </div>
        <div class="phone-box ani" swiper-animate-effect="fadeIn" swiper-animate-duration="3s"
             swiper-animate-delay="1s">
          <img class="center-phone ani" swiper-animate-effect="fadeInDown" swiper-animate-duration="3s"
               swiper-animate-delay="0.2s" style="width:5.91rem" src="./images/4-center-phone.png" alt="">
          <img class="search ani" swiper-animate-effect="zoomIn" swiper-animate-duration="3s"
               swiper-animate-delay="0.2s" style="width:3.44rem" src="./images/4-serch.png" alt="">
        </div>
      </div>
      <div class="page3-text-box">
        <p class="ani" swiper-animate-effect="bounceInLeft" swiper-animate-duration="2s"
           swiper-animate-delay="1.6s">在登录页面中</p>
        <p class="ani" swiper-animate-effect="bounceInLeft" swiper-animate-duration="2s"
           swiper-animate-delay="2.6s">将个人信息完整录入</p>
        <p class="ani" swiper-animate-effect="bounceInLeft" swiper-animate-duration="2s"
           swiper-animate-delay="3s">即可开启<span>趣味党建学习之旅</span></p>
      </div>
    </div>
    <div class="swiper-slide page5">
      <div class="top">
        <div class="top-tile">
          <div class="firstStep ani" swiper-animate-effect="fadeInLeft" swiper-animate-duration="2s"
               swiper-animate-delay="0.2s">第三步
          </div>
          <p class="desc ani" swiper-animate-effect="fadeInRight" swiper-animate-duration="2s"
             swiper-animate-delay="0.2s">指尖上的智慧考堂</p>
          <p class="red desc2 ani" swiper-animate-effect="fadeInLeft" swiper-animate-duration="3s"
             swiper-animate-delay="0.5s">海量题库，自由选择</p>
        </div>
        <div class="phone-box ani" swiper-animate-effect="fadeIn" swiper-animate-duration="3s"
             swiper-animate-delay="1s">
          <img class="center-phone ani" swiper-animate-effect="fadeInDown" swiper-animate-duration="3s"
               swiper-animate-delay="0.2s" style="width:5.54rem" src="./images/5-phone.png" alt="">
          <img class="example ani" swiper-animate-effect="fadeInRight" swiper-animate-duration="3s"
               swiper-animate-delay="1s" style="width:5.13rem" src="./images/5-example.png" alt="">
          <img class="two-study ani" swiper-animate-effect="zoomIn" swiper-animate-duration="3s"
               swiper-animate-delay="2s" style="width:5.22rem" src="./images/5-two-study.png" alt="">
        </div>
      </div>
      <div class="page5-text-box">
        <p class="ani" swiper-animate-effect="bounceInLeft" swiper-animate-duration="3s"
           swiper-animate-delay="2s">知识面<span class="red">全覆盖</span>,题库内容丰富多样</p>
        <p class="ani" swiper-animate-effect="bounceInLeft" swiper-animate-duration="3s"
           swiper-animate-delay="2.5s">首页选择相应学习单元,即刻参与答题闯关</p>
      </div>
    </div>

    <div class="swiper-slide page6">
      <div class="top">
        <div class="big-line ani" swiper-animate-effect="fadeInLeft" swiper-animate-duration="2s"
             swiper-animate-delay="0.2s"></div>
        <p class="desc ani" swiper-animate-effect="fadeInRight" swiper-animate-duration="2s"
           swiper-animate-delay="0.2s">指尖上的智慧考堂</p>
        <p class="red desc2 ani" swiper-animate-effect="fadeInLeft" swiper-animate-duration="3s"
           swiper-animate-delay="0.5s">循序渐进，专业解析</p>
      </div>
      <div class="phone-box ani" swiper-animate-effect="fadeIn" swiper-animate-duration="3s"
           swiper-animate-delay="1s">
        <img class="center-phone ani" swiper-animate-effect="fadeInDown" swiper-animate-duration="3s"
             swiper-animate-delay="1s" style="width:5.44rem" src="./images/6-phone.png" alt="">
        <img class="answer ani" swiper-animate-effect="zoomIn" swiper-animate-duration="3s"
             swiper-animate-delay="1s" style="width:4.97rem" src="./images/6-answser.png" alt="">
        <img class="yuan ani" swiper-animate-effect="zoomIn" swiper-animate-duration="3s"
             swiper-animate-delay="3s" style="width:2.73rem" src="./images/6-yuan.png" alt="">
      </div>
      <div class="page5-text-box">
        <p class="ani" swiper-animate-effect="bounceInLeft" swiper-animate-duration="3s"
           swiper-animate-delay="1.5s">每个关卡<span class="red">满分100分</span></p>
        <p class="ani" swiper-animate-effect="bounceInLeft" swiper-animate-duration="3s"
           swiper-animate-delay="2s">分数达到60分,立即进入下一级闯关</p>
      </div>
    </div>
    <div class="swiper-slide page7">
      <div class="top">
        <div class="big-line ani" swiper-animate-effect="fadeInLeft" swiper-animate-duration="2s"
             swiper-animate-delay="0.2s"></div>
        <p class="desc ani" swiper-animate-effect="fadeInRight" swiper-animate-duration="2s"
           swiper-animate-delay="0.2s">指尖上的智慧考堂</p>
        <p class="red desc2 ani" swiper-animate-effect="fadeInLeft" swiper-animate-duration="3s"
           swiper-animate-delay="0.5s">竞争排名，一较高下</p>
      </div>
      <div class="phone-box ani" swiper-animate-effect="fadeIn" swiper-animate-duration="3s"
           swiper-animate-delay="1s">
        <img class="center-phone ani" swiper-animate-effect="fadeInDown" swiper-animate-duration="3s"
             swiper-animate-delay="1s" style="width:5.54rem" src="./images/7-phone.png" alt="">
        <img class="answer ani" swiper-animate-effect="rollIn" swiper-animate-duration="3s"
             swiper-animate-delay="1.2s" style="width:5.66rem" src="./images/7-paihangbang.png" alt="">
      </div>
      <div class="page5-text-box">
        <p class="ani" swiper-animate-effect="bounceInLeft" swiper-animate-duration="3s"
           swiper-animate-delay="2s">完成所有关卡题目，可查看当前<span class="red">答题排行</span></p>
        <p class="ani" swiper-animate-effect="bounceInLeft" swiper-animate-duration="3s"
           swiper-animate-delay="2.5s"> 及时了解学习情况，查漏补缺</p>
      </div>
    </div>
    <div class="swiper-slide page8">
      <div class="top">
        <div class="big-line ani" swiper-animate-effect="fadeInLeft" swiper-animate-duration="2s"
             swiper-animate-delay="0.2s"></div>
        <p class="desc ani" swiper-animate-effect="fadeInRight" swiper-animate-duration="2s"
           swiper-animate-delay="0.2s">指尖上的智慧考堂</p>
        <p class="red desc2 ani" swiper-animate-effect="fadeInLeft" swiper-animate-duration="3s"
           swiper-animate-delay="0.5s">海量题库，自由选择</p>
      </div>
      <div class="phone-box ani" swiper-animate-effect="fadeIn" swiper-animate-duration="3s"
           swiper-animate-delay="1s">
        <div class="center-phone-box ani" swiper-animate-effect="fadeInDown" swiper-animate-duration="2s"
             swiper-animate-delay="0.2s">
          <div class="erweiborder ani" swiper-animate-effect="fadeInLeft" swiper-animate-duration="3s"
               swiper-animate-delay="0.2s">
            <img class="ani" swiper-animate-effect="zoomIn" swiper-animate-duration="2s"
                 swiper-animate-delay="2s"
                 src="./images/8-erwei.png" alt="">
          </div>
          <p class="first-p ani" swiper-animate-effect="fadeInDown" swiper-animate-duration="3s"
             swiper-animate-delay="3s">赶快扫描二维码</p>
          <p class="ani" swiper-animate-effect="fadeInDown" swiper-animate-duration="3s"
             swiper-animate-delay="3s">将党建知识收入囊中</p>
          <p class="ani" swiper-animate-effect="fadeInDown" swiper-animate-duration="3s"
             swiper-animate-delay="3s">开启<span class="red">智慧党建</span>闯关学习</p>
        </div>
        <img class="person ani" swiper-animate-effect="fadeInRight" swiper-animate-duration="3s"
             swiper-animate-delay="0.2s"
             style="width: 2.43rem" src="./images/8-person.png" alt="">
        <img class="tree ani" swiper-animate-effect="fadeIn" swiper-animate-duration="5s"
             swiper-animate-delay="2s" style="width:2.25rem" src="./images/bg-tree.png" alt="">
      </div>
    </div>
  </div>
</div>
<script src="./js/rem.js"></script>
<script src="./js/jquery.min.js"></script>
<script src="./js/pace.js"></script>
<script src="./js/swiper.min.js"></script>
<script src="./js/swiper.animate.min.js"></script>
<script src="https://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>
<script>
  window.onload=function () {
    var mySwiper = new Swiper('.swiper-container', {
      direction: 'vertical', // 垂直切换选项
      loop: false, // 循环模式选项
      on: {
        init: function () {
          swiperAnimateCache(this); //隐藏动画元素
          swiperAnimate(this); //初始化完成开始动画
        },
        slideChangeTransitionEnd: function () {
          swiperAnimate(this); //每个slide切换结束时也运行当前slide动画
          if(this.activeIndex==0){
            $('.phone').removeClass('phoneAni').addClass('fadeInLeft');
            setTimeout(function () {
              $('.phone').addClass('phoneAni');
            },3500);
          }
          if(this.activeIndex==1){
            $('.phone2').removeClass('phoneAni').addClass('fadeInLeft');
            setTimeout(function () {
              $('.phone2').addClass('phoneAni');
            },3500);
          }
          if (this.activeIndex !== 7) {
            $('.u-arrow-bottom').show();
          } else {
            $('.u-arrow-bottom').hide();
          }

          //this.slides.eq(this.activeIndex).find('.ani').removeClass('ani'); 动画只展现一次，去除ani类名
        }
      },
    });
    Pace.on('hide', function () {
      $('.pages-box').css({opacity:1})
    });
    $(document).ready(function () {
      var audio = document.getElementById('media');
      audio.play();
      if(audio.paused){
        $('#audio_btn').removeClass('rotate')
      }else {
        $('#audio_btn').addClass('rotate')
      };
      document.addEventListener('WeixinJSBridgeReady',function () {
        audio.play();
        $('#audio_btn').addClass('rotate')
      },false)
      $('#audio_btn').click(function () {
        if(audio.paused){
          audio.play();
          $(this).addClass('rotate')
        }else {
          audio.pause();// 暂停
          $(this).removeClass('rotate')
        }

      })
    });
    setTimeout(function () {
      $('.phone').addClass('phoneAni');
    },3500);
  }
</script>
<script>
  $(function () {
    var url = encodeURIComponent(window.location.href);
    var reulut;

    $.post('https://www.cloudcpc.com/share.php',
        {"url": url},
        function (result) {
          reulut = result;
          console.log(result)
          wx.config({
            debug: false,
            appId: reulut.appId, // 必填，公众号的唯一标识
            timestamp: reulut.timestamp, // 必填，生成签名的时间戳
            nonceStr: reulut.nonceStr, // 必填，生成签名的随机串
            signature: reulut.signature,// 必填，签名
            jsApiList: [ // 必填，需要使用的JS接口列表
              'onMenuShareAppMessage', //1.0 分享到朋友
              'onMenuShareTimeline', //1.0分享到朋友圈
              'updateAppMessageShareData', //1.4 分享到朋友
              'updateTimelineShareData' //1.4分享到朋友圈
            ]
          });

          wx.ready(function () {   //需在用户可能点击分享按钮前就先调用
            wx.updateAppMessageShareData({
              title: '七一云党建“党建考堂”平台', // 分享标题
              desc: '七一云党建，互联网+智慧党建新阵地', // 分享描述
              link: window.location.href, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
              imgUrl: 'https://www.cloudcpc.com/h5/dj-kaotang/images/dj_share_kaotang.png', // 分享图标
            });

            wx.updateTimelineShareData({
              title: '七一云党建“党建考堂”平台', // 分享标题
              desc: '七一云党建，互联网+智慧党建新阵地', // 分享描述
              link: window.location.href, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
              imgUrl: 'https://www.cloudcpc.com/h5/dj-kaotang/images/dj_share_kaotang.png', // 分享图标
            });
          });

        }
    );
  })
</script>
</body>
</html>